<template>
	<view class="">
		<view class="listbox" v-for="(item,index) in 10">
			<view class="leftbox">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="rightbox">
				<view class="name">
					毛肚一份
				</view>
				<view class="astrict">
					仅限重庆老火锅 高新店适用
				</view>
				<view class="site">
					已存入礼品券中
				</view>
				<view class="time">
					2021-10-1 15:00
				</view>
			</view>
			<view class="ckqm" v-if="flag">
				查看券码
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			flag:{type:Boolean,default:false}
		}
	}
</script>

<style lang="scss" scoped>
	.listbox {
		width: 100%;
		height: 212rpx;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		position: relative;

		.ckqm {
			position: absolute;
			width: 166rpx;
			height: 52rpx;
			background-image: linear-gradient(89deg,
					#fc6830 0%,
					#f6301e 100%);
			border-radius: 26rpx;
			line-height: 52rpx;
			text-align: center;
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			color: #fff;
			right: 20rpx;
			bottom: 25rpx;
		}

		.leftbox {
			width: 212rpx;
			height: 212rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
			border-right: 1rpx dashed #dcdcdc;

			image {
				width: 150rpx;
				height: 150rpx;
				display: block;
				margin: auto;
			}
		}

		.rightbox {
			margin-left: 41rpx;
			padding-top: 30rpx;
			box-sizing: border-box;

			.name {
				font-family: MicrosoftYaHei-Bold;
				font-size: 26rpx;
				color: #000;
				font-weight: 700;
			}

			.astrict {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #FF4B14;
				margin-top: 12rpx;
			}

			.site {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #000;
				margin-top: 12rpx;
			}

			.time {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #999999;
				margin-top: 12rpx;
			}
		}
	}
</style>
